<template>
	<view class="container">
		<!-- 修改头像 -->
		<view class="editProfile common">
			<view class="left">
				<image :src="form.avatar" mode="aspectFill"></image>
				<text class="txt">修改头像</text>
			</view>
			<u-icon name="arrow-right" color="#000" size="28"></u-icon>
		</view>
		<view class="groupItem">
			<view class="list">
				<view class="left">
					 <view class="tit">姓名</view>
					 <input type="text" v-model="" placeholder="请输入收货人姓名" placeholder-style="color:#999999"/>
				</view>
			</view>
			<view class="list">
				<view class="left">
					 <view class="tit">昵称</view>
					 <text class="nickName">眉初</text>
				</view>
			</view>
			<view class="list ">
				<view class="left">
					 <view class="tit">手机号</view>
					 <input type="number" value="" placeholder="请输入手机号" placeholder-style="color:#999999"/>
				</view>
			</view>
			<view class="list " @click="show = true">
				<view class="left">
					 <view class="tit">性别</view>
					<text class="txt" :class="form.gender=='请选择'? '':'black'">{{form.gender}}</text>
				</view>
				<u-icon name="arrow-right" color="#000" size="28"></u-icon>
			</view>
			<view class="list " @click="showBirthday = true">
				<view class="left">
					 <view class="tit">出生日期</view>
					<text class="txt" :class="form.birthday=='请选择'? '':'black'">{{form.birthday}}</text>
				</view>
				<u-icon name="arrow-right" color="#000" size="28"></u-icon>
			</view>
			<view class="list " @click="showAddress = true">
				<view class="left">
					 <view class="tit">所在地</view>
					<text class="txt" :class="form.address=='请选择'? '':'black'">{{form.address}}</text>
				</view>
				<u-icon name="arrow-right" color="#000" size="28"></u-icon>
			</view>
		</view>
		<u-picker v-model="show" mode="selector" :range="selector" @confirm="confirm"></u-picker>
		<u-picker v-model="showBirthday" mode="time"  @confirm="confirmBirthday"></u-picker>
		<u-select v-model="showAddress" label-name="name" value-name="id" child-name="datas" :default-value="defaultList" mode="mutil-column-auto" :list="list" @confirm="confirm"></u-select>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list:[],
				defaultList:[0,0,0],
				showAddress:false,
				showBirthday:false,
				selector: ['男','女'],
				show:false,
				form:{},
			}
		},
		async onLoad() {
			this.treeAddress()
			this.form = this.userInfo
			console.log(this.form,"dddd")
		},
		methods: {
			async treeAddress(){
				let {code,data} = await this.$u.api.tree();
				if(code){
					this.list = data;
				}
			},
			confirm(e) {
				this.defaultList = [e[0].extra,e[1].extra,e[2].extra];
				this.site = `${e[0].label} ${e[1].label} ${e[2].label}`;
				this.form.addrid = `${e[0].value},${e[1].value},${e[2].value}`;
			},
			confirm(e){
				this.form.gender = this.selector[e]
			},
			confirmBirthday(e){
				this.form.birthday = e.year +'-'+ e.month +'-'+ e.day 
				console.log(this.form.birthday,"ddd")
			},
			confirmAddress(e){
				this.form.address = e.province.label +'-'+ e.city.label +'-'+ e.area.label 
				console.log(e,"Dddddd")
			}
		}
	}
</script>

<style lang="scss" scoped >
.container{
	padding: 40rpx 32rpx 0 32rpx;
	.common{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 8rpx ;
		padding: 35rpx 32rpx;
		.left{
			display: flex;
			align-items: center;
			image{
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
				margin-right: 62rpx;
			}
			.tit{
				width: 96rpx;
				margin-right: 62rpx;
			}
			.txt{
				color: #999999;
				font-size: 24rpx;
			}
			.nickName{
				color: #333333;
				font-size: 24rpx;
			}
		}
	}
	.groupItem{
		padding: 0 32rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		.list{
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid rgba(142,142,142,.24);
			padding: 35rpx 0;
			.left{
				display: flex;
				align-items: center;
				.tit{
					width: 110rpx;
					margin-right: 50rpx;
				}
				.txt{
					color: #999999;
					font-size: 24rpx;
				}
			}
		}
	}
	.editProfile{
		padding: 32rpx 32rpx 32rpx 25rpx;
		margin-bottom: 30rpx;
	}
	.black{
		color: #333333 !important;
	}
}
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
